<template>
  <div style="height: 100%; display: block">
    <el-row style="display: flex; height: 100%; background-color: #f6f8f9" :gutter="30">
      <el-col :span="6" style="background-color: #fff">
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 10px;
            margin: 10px 0;
            background-color: white;
          ">
          部门列表
          <el-link type="primary" v-if="dpms && dpms.length == 0" @click="showAddDpm()">
            添加
          </el-link>
        </div>
        <div style="
            padding: 0 5px;
            overflow-x: auto;
            overflow-y: auto;
            height: 80%;
            background-color: #fafafa;
          ">
          <el-tree :data="dpms" node-key="id" default-expand-all :expand-on-click-node="false" :props="{
            children: 'SubDepartments',
          }" @node-click="(node) => (curDpm = node)" style="background-color: #fafafa">
            <span class="custom-tree-node" slot-scope="{ data }">
              <span>
                {{ data.DPM_Name }}
              </span>
              <i class="el-icon-s-platform" v-if="data.DPM_Inner"></i>
              <!-- <span>
                <el-button type="text" size="mini" @click="
                  () => {
                    curDpm = { ...data }
                    editDpmVis = true
                  }
                ">
                  修改
                </el-button>
              </span> -->
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18" style="flex: 1; margin-left: 10px; background: #fff; padding: 10px">
        <div v-if="curDpm" class="session">
          <div style="margin-bottom: 20px">
            {{ curDpm.DPM_Name }}
          </div>
          <div>
            <span style="width: 60px; text-align: right">关键字</span>
            <el-input placeholder="请输入关键字" v-model="dpmEmpReq.keyword"
              style="width: 200px; margin-left: 10px"></el-input>
            <el-link type="primary" style="margin-left: 30px" @click="getDepartmentEmps()" v-if="curDpm">
              用户搜索
            </el-link>
            <el-link type="primary" style="margin-left: 30px" v-if="curDpm" @click="addDpmEmpVis = true">
              添加用户
            </el-link>
            <el-link type="primary" style="margin-left: 30px" v-if="curDpm" @click="showDepartmentCmpEmps">
              公司权限管理
            </el-link>
            <el-link type="primary" style="margin-left: 30px" v-if="curDpm" @click="showAddDpm(curDpm)">
              添加子部门
            </el-link>
            <el-link type="primary" style="margin-left: 30px" v-if="curDpm" @click="editDpmVis = true">
              修改部门
            </el-link>
            <el-link style="margin-left: 30px" @click="removeDepartment(curDpm)" type="danger">
              删除部门
            </el-link>
          </div>
          <el-table :data="dpmEmpRes.Items" style="margin-top: 20px" height="65vh">
            <el-table-column prop="DPM_Name" label="部门" width="200"></el-table-column>
            <el-table-column prop="USR_Name" label="用户名" width="120"></el-table-column>
            <el-table-column prop="USR_Phone" label="联系方式" width="160"></el-table-column>
            <el-table-column prop="POS_Name" label="用户角色">
              <template slot-scope="scope">
                <el-tag v-for="item in scope.row.Roles" :key="item.RE_ID">
                  {{ item.RL_Name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click="deleteDepartmentEmployee(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%; height: 40px">
            <el-pagination layout="total,prev,pager,next" style="float: right" background small
              :current-page.sync="dpmEmpReq.pageIndex" :total="dpmEmpRes.Total" :page-size="dpmEmpReq.pageSize"
              :page-sizes="[10, 15, 20]" @size-change="
                (val) => {
                  dpmEmpReq.pageSize = val
                  getDepartmentEmps()
                }
              " @current-change="getDepartmentEmps()"></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-drawer :visible.sync="addDpmVis" :wrapperClosable="false" title="添加部门">
      <div style="padding: 20px">
        <el-form :model="newDpm" ref="addDpmForm" label-width="100px">
          <el-form-item label="上级部门" v-if="newDpm.ParentName">
            {{ newDpm.ParentName }}
          </el-form-item>
          <el-form-item label="名称" prop="DPM_Name" :rules="[{ required: true, message: '请填写部门名称' }]">
            <el-input v-model="newDpm.DPM_Name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="newDpm.DPM_Inner">是否开放公司查阅权限</el-checkbox>
          </el-form-item>
          <!-- <el-form-item>
            <el-checkbox v-model="newDpm.DPM_CompanyLimit">限制部门查阅公司</el-checkbox>
          </el-form-item> -->
          <el-form-item label="部门描述">
            <el-input v-model="newDpm.DPM_Desc" type="textarea" :rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addDepartment">添加</el-button>
            <el-button type="danger" @click="addDpmVis = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-drawer :visible.sync="editDpmVis" :wrapperClosable="false" title="部门编辑">
      <div style="padding: 20px">
        <el-form :model="curDpm" ref="editDpmForm" label-width="100px" v-if="curDpm">
          <el-form-item label="上级部门" v-if="curDpm.ParentName">
            {{ curDpm.ParentName }}
          </el-form-item>
          <el-form-item label="名称" prop="DPM_Name" :rules="[{ required: true, message: '请填写部门名称' }]">
            <el-input v-model="curDpm.DPM_Name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="curDpm.DPM_Inner">是否开放公司查阅权限</el-checkbox>
          </el-form-item>
          <!-- <el-form-item>
            <el-checkbox v-model="curDpm.DPM_CompanyLimit">限制部门查阅公司</el-checkbox>
          </el-form-item> -->
          <el-form-item label="部门描述">
            <el-input v-model="curDpm.DPM_Desc" type="textarea" :rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editDepartment">保存</el-button>
            <el-button type="danger" @click="editDpmVis = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-dialog :visible.sync="addDpmEmpVis" title="选择成员" width="60vw" :modal-append-to-body="false" top="70px">
      <companyEmployeesChoose @sure="addDepartmentEmployees" />
    </el-dialog>

    <el-dialog :visible.sync="cmpVis" title="公司权限管理" width="60vw" :modal-append-to-body="false" top="70px">
      <departmentCmpEmpManager :dpmId="cmpEmpDpmId" />
    </el-dialog>

    <!-- <el-drawer
      :visible.sync="addDpmEmpVis"
      :wrapperClosable="false"
      title="添加用户"
    >
      <el-form v-if="curDpm" label-width="100px">
        <el-form-item label="部门">
          <div>{{ curDpm.DPM_Name }}</div>
        </el-form-item>
        <el-form-item label="雇员">
          <el-select v-model="newDpmEmp.DE_EmployeeId" :filterable="true">
            <el-option
              v-for="emp in employees"
              :key="emp.ECV_TargetID"
              :value="emp.ECV_TargetID"
              :label="emp.USR_Name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDepartmentEmployee" type="primary">
            添加
          </el-button>
          <el-button @click="addDpmEmpVis = false" type="danger">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer> -->
  </div>
</template>
<script>
import {
  getDepartmentTree,
  addDepartment,
  modifyDepartment,
  getDepartmentEmps,
  removeDepartment,
  addDepartmentEmployees,
  deleteDepartmentEmployee,
} from '@/api/flowCenter/organiztion/departmentManage'
import companyEmployeesChoose from '@/views/web/orgnization/components/companyEmployeesChoose.vue'
import departmentCmpEmpManager from '@/views/web/orgnization/components/departmentCmpEmpManager.vue'
export default {
  components: { companyEmployeesChoose, departmentCmpEmpManager },
  data: function () {
    return {
      cmpEmpDpmId: null,
      dpms: [],
      emps: [],
      dpmEmpReq: {
        codeLink: null,
        pageIndex: 1,
        pageSize: 20,
        keyword: null,
      },
      dpmEmpRes: {
        Items: [],
        Total: 0,
      },
      dpmCmpEmps: [],

      newDpm: {},
      curDpm: null,

      addDpmVis: false,
      editDpmVis: false,
      addDpmEmpVis: false,
      cmpVis: false,
    }
  },
  watch: {
    curDpm() {
      if (this.curDpm) {
        this.getDepartmentEmps()
      }
    },
  },
  methods: {
    getDepartmentTree() {
      getDepartmentTree().then(({ data }) => {
        this.dpms = data
      })
    },
    getDepartmentEmps() {
      this.dpmEmpReq.codeLink = this.curDpm.DPM_CodeLink
      getDepartmentEmps(this.dpmEmpReq).then(({ data }) => {
        this.dpmEmpRes = data
      })
    },
    showDepartmentCmpEmps() {
      this.cmpEmpDpmId = this.curDpm.DPM_ID
      this.cmpVis = true
    },
    showAddDpm(dpm) {
      this.newDpm = {
        DPM_ParentId: dpm ? dpm.DPM_ID : 0,
        ParentName: dpm ? dpm.DPM_Name : '',
      }
      this.addDpmVis = true
    },
    addDepartment() {
      this.$refs['addDpmForm'].validate((valid) => {
        if (valid) {
          addDepartment(this.newDpm).then(() => {
            this.getDepartmentTree()
            this.newDpm = {}
            this.addDpmVis = false
          })
        } else {
          return false
        }
      })
    },
    editDepartment() {
      this.$refs['editDpmForm'].validate((valid) => {
        if (valid) {
          modifyDepartment(this.curDpm).then(() => {
            this.getDepartmentTree()
            this.curDpm = null
            this.editDpmVis = false
          })
        } else {
          return false
        }
      })
    },
    removeDepartment(dpm) {
      this.$confirm(`确定要删除部门【${dpm.DPM_Name}】？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then((r) => {
          removeDepartment(dpm.DPM_ID).then((r) => {
            this.curDpm = null
            this.getDepartmentTree()
          })
        })
        .catch((ex) => {
          return
        })
    },
    addDepartmentEmployees(chooseEmps) {
      addDepartmentEmployees({ dpm: this.curDpm, emps: chooseEmps }).then(
        () => {
          this.getDepartmentEmps()
          this.addDpmEmpVis = false
        }
      )
    },
    deleteDepartmentEmployee(data) {
      this.$confirm(`是否删除？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteDepartmentEmployee(data.DE_ID).then(() => {
          this.getDepartmentEmps()
        })
      })
    },
  },
  mounted: function () {
    this.getDepartmentTree()
  },
}
</script>
<style scoped>
.session {
  background: white;
  margin-bottom: 10px;
  padding: 10px;
}
</style>